<template>
	<div class="system-user-dialog-container">
		<el-dialog :close-on-click-modal="false" title="通道配置" draggable v-model="dialogVisible">
			<deiv class="condition-search">
				<div class="search-column" style="width: 200px">
					<el-select placeholder="请选择" v-model="searchForm.type">
						<el-option label="启用" value="1"></el-option>
						<el-option label="未启用" value="0"></el-option>
					</el-select>
				</div>
				<div class="search-column">
					<el-input placeholder="请输入设备名称" v-model="searchForm.deviceName"></el-input>
				</div>
				<div class="search-column">
					<el-button icon="Search" type="primary" @click="searchData">{{ $t('common.queryBtn') }}</el-button>
					<el-button icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
				</div>
			</deiv>
			<avue-crud
				ref="crudTable"
				v-model="form"
				:page="page"
				:data="tableData"
				:table-loading="tableLoading"
				:option="tableOption"
				@search-change="searchChange"
				@size-change="sizeChange"
				@current-change="currentChange"
				@selection-change="selectionChange"
			>
			</avue-crud>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="submitBindData">确定</el-button>
					<el-button @click="dialogVisible = false"> 取消 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { tableOption } from './crud/chanel.js';
import { chanelDevListEdit, chanelDevList } from '/@/api/basiciot/iconfiguration/list';

import { useMessage, useMessageBox } from '/@/hooks/message';

const tableLoading = ref(false);
const tableData = ref([]);
const dialogVisible = ref(false);
const form = reactive({});
const page = reactive({
	total: 0, // 总页数
	currentPage: 1, // 当前页数
	pageSize: 10, // 每页显示多少条
});
const searchForm = reactive({
	type: '',
	deviceName: '',
});
const devIds = ref([]);
const crudTable = ref();
const iconfigurationId = ref();
const deviceId = ref();
const models = ref();

const getList = (page: object, params?: object) => {
	tableLoading.value = true;
	chanelDevList(
		Object.assign(
			{
				current: page.currentPage,
				size: page.pageSize,
			},
			params
		)
	)
		.then((res: any) => {
			tableData.value = res.data || [];
			page.total = res.data.total;
			tableLoading.value = false;
			nextTick(() => {
				const list = tableData.value.filter((obj) => {
					return obj.flag == 1;
				});
				crudTable.value.toggleSelection(list);
			});
		})
		.catch(() => {
			tableLoading.value = false;
		});
};
const searchData = () => {
	page.currentPage = 1;
	getList(page, searchForm);
};
const searchChange = function (form: object, done: any) {
	page.currentPage = 1;
	getList(page, form);
	done();
};
const sizeChange = function (pageSize: number) {
	page.pageSize = pageSize;
};
const currentChange = function (current: number) {
	page.currentPage = current;
};
const selectionChange = (list: any) => {
	tableData.value.forEach((obj: any) => {
		obj.checked = 0;
	});
	list &&
		list.forEach((obj: any) => {
			obj.checked = 1;
		});

	devIds.value = list;
	models.value = tableData.value.map((row: any) => {
		return row.checked;
	});
};
const submitBindData = () => {
	if (devIds.value.length == 0) {
		useMessage().warning('请选择需要配置的通道');
		return;
	}
	tableLoading.value = true;
	chanelDevListEdit({ scadaId: iconfigurationId.value, deviceId: deviceId.value, models: models.value })
		.then((res) => {
			if (res.ok) {
				useMessage().success('设备通道修改成功');
				dialogVisible.value = false;
			} else {
				useMessage().warning('设备通道修改失败');
			}
			tableLoading.value = false;
		})
		.catch((err) => {
			useMessage().success('设备通道修改失败');
		});
};
// 打开弹窗
const openDialog = async (row: any) => {
	dialogVisible.value = true;
	iconfigurationId.value = row.id;
	deviceId.value = row.unitNo;
	getList(page, { scadaId: row.id, deviceId: row.unitNo });
	// 重置表单数据
	nextTick(() => {});
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style lang="scss" scoped>
.condition-search {
	display: flex;
	margin-bottom: 10px;
	.search-column {
		// flex: 1;
		margin-right: 10px;
	}
}
</style>
